<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>倒计时</title>
	<link rel="stylesheet" href="index.css">
	<script type="text/javascript" src="jquery-3.4.0.min.js"></script>
	<script type="text/javascript">
		//清明节
		function HandleFestival(festivalDate,key){
			var date1 = new Date(); //开始时间
			var date2 = new Date(festivalDate.replace(/-/, "/")); //结束时间
			var date3 = date2.getTime() - date1.getTime(); //时间差的毫秒数
			var intDiff = parseInt(date3 / 1000);//倒计时总秒数量
			Timer(intDiff,key);
		}
		function Timer(intDiff,key) {
			window.setInterval(function () {
				var day = 0,
					hour = 0,
					minute = 0,
					second = 0;//时间默认值 
				if (intDiff > 0) {
					day = Math.floor(intDiff / (60 * 60 * 24));
					hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
					minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
					second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
				}
				if (minute <= 9) minute = '0' + minute;
				if (second <= 9) second = '0' + second;
				$('#day_show'+key).html(day + "天");
				$('#hour_show'+key).html('<s id="h"></s>' + hour + '时');
				$('#minute_show'+key).html('<s></s>' + minute + '分');
				$('#second_show'+key).html('<s></s>' + second + '秒');
				intDiff--;
			}, 1000);
		}
		$(function () {
			//节日依次是清明节、劳动节、端午节、中秋节、国庆节，元旦节，春节
			var festivalDates = ['2022-04-05 00:00:000','2022-05-01 00:00:000','2022-06-03 00:00:000','2022-09-10 00:00:000','2022-10-01 00:00:000','2023-01-01 00:00:000','2023-01-22 00:00:000'];
			for (let key in festivalDates) {
				HandleFestival(festivalDates[key],key);
			}
		});
	</script>
</head>

<body class="bg-color">
	<div class="time-item">
		<span class="festival">距离清明节</span>
		<span class="day-class" id="day_show0">0天</span>
		<strong id="hour_show0">0时</strong>
		<strong id="minute_show0">0分</strong>
		<strong id="second_show0">0秒</strong>
	</div>
	<div class="time-item">
		<span class="festival">距离劳动节</span>
		<span  class="day-class" id="day_show1">0天</span>
		<strong id="hour_show1">0时</strong>
		<strong id="minute_show1">0分</strong>
		<strong id="second_show1">0秒</strong>
	</div>
	<div class="time-item">
		<span class="festival">距离端午节</span>
		<span class="day-class" id="day_show2">0天</span>
		<strong id="hour_show2">0时</strong>
		<strong id="minute_show2">0分</strong>
		<strong id="second_show2">0秒</strong>
	</div>
	<div class="time-item">
		<span class="festival">距离中秋节</span>
		<span class="day-class" id="day_show3">0天</span>
		<strong id="hour_show3">0时</strong>
		<strong id="minute_show3">0分</strong>
		<strong id="second_show3">0秒</strong>
	</div>
	<div class="time-item">
		<span class="festival">距离国庆节</span>
		<span class="day-class" id="day_show4">0天</span>
		<strong id="hour_show4">0时</strong>
		<strong id="minute_show4">0分</strong>
		<strong id="second_show4">0秒</strong>
	</div>
	<div class="time-item">
		<span class="festival">距离元旦节</span>
		<span class="day-class" id="day_show5">0天</span>
		<strong id="hour_show5">0时</strong>
		<strong id="minute_show5">0分</strong>
		<strong id="second_show5">0秒</strong>
	</div>
	<div class="time-item">
		<span class="festival">距离春节</span>
		<span class="day-class" id="day_show6">0天</span>
		<strong id="hour_show6">0时</strong>
		<strong id="minute_show6">0分</strong>
		<strong id="second_show6">0秒</strong>
	</div>
	<div class="time-img">
		<!-- <img src="img/0.jpg" alt=""> -->
	</div>
</body>
</html>